/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.chat-footer {
  margin-top: 1rem;
  min-height: 60px;
  display: flex;
  border: 1px solid #dde6f6;
  box-shadow: 0px 4px 18px rgba(195, 209, 226, 0.25);
  border-radius: 30px;
  width: 100%;
  min-width: 720px;
  // box-shadow: 5px 4px 24px rgba(66, 133, 244, 0.15);

  .chat-textarea {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding-left: 2%;

    input {
      width: 100%;
      height: 45px;
      border: 0px;
      border-radius: 4px;
      resize: none;
      outline: none;
      padding: 14px;
      font-family: "Google Sans", sans-serif !important;
      box-sizing: border-box;
      -ms-overflow-style: none;
      scrollbar-width: none;
      font-size: 0.95rem;
      line-height: 1.1rem;
      color: #534646;
    }

    input::-webkit-scrollbar {
      display: none;
    }
  }

  .micIcon {
    display: flex;
    align-items: center;
    color: #1f1f1f;
    margin-top: 2px;
    padding-right: 1%;

    img {
      max-width: 40%;
      cursor: pointer;
    }
  }
}

.recording-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  cursor: pointer;
  align-items: baseline;
}

.blue-dot {
  /* Ellipse 1226 */
  content: '';
  width: 8px;
  height: 8px;
  left: 1503px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Blue */
  background: #4285F4;
  animation: blue-transform 2s infinite;

}

.green-dot {
  content: '';
  width:8px;
  height: 8px;
  left: 1522px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Green */
  background: #0F9D58;
  animation: green-transform 2s infinite;
}

.yellow-dot {
  content: '';
  width: 8px;
  height: 8px;
  left: 1541px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Yellow */
  background: #F4B400;
  animation: yellow-transform 2s infinite;
}
